<template>
    <div class="mark">
        <div class="markcon"><p class="markTitle">各医生收费构成</p>
            <a-icon type="close-square" class="close" @click="markClose" />
            <span class="download">下载</span>
            <div class="timeClass">
                <a-button-group class="timeChoose">
                    <a-button :type="timeNum===1?'primary':''" class="timeButton" @click="timeChange(1)">年</a-button>
                    <a-button :type="timeNum===2?'primary':''" class="timeButton" @click="timeChange(2)">月</a-button>
                </a-button-group>
                <a-date-picker :mode="timeTypes[timeNum].mode"
                               class="timePicker"
                               v-model="dateValue"
                               @panelChange="panelChangeHandler"
                               :placeholder="timeTypes[timeNum].selectP"
                               :open="dateOpen"
                               :format="timeTypes[timeNum].format"
                               @openChange="handleOpenChange"/>
            </div>
            <div class="clear"></div>
            <a-table :columns="columns" class="custom"  :pagination="false" :data-source="markData" style="margin-top: 10px" :scroll="{ y: '60vh' }">
            </a-table>
        </div>
    </div>
</template>

<script>
    import Time from '@/components/time.vue'
    import moment from 'moment';
    import {doctorDataFeeCompositionList} from "@/api/Department";
    export default {
        components: {
            Time
        },
        data() {
            return {
                timeNum: 2,
                timeSelectShow: false,
                dateOpen: false,
                dateValue: moment(),
                timeTypes: {
                    1: {name: '年', key: 'year', selectP: "年份选择", mode: "year", format: "YYYY"},
                    2: {name: '月', key: 'month', selectP: "月份选择", mode: "month", format: "YYYY-MM"},
                },
                timeParams: {
                    year: moment().format('YYYY'),
                    month: moment().format('MM')
                },
                moment,
                columns:[
                    {
                        title: '医生',
                        dataIndex: 'doctorName',
                    },
                    {
                        title: '医疗总费用',
                        dataIndex: 'money',
                    },
                    {
                        title: '结余',
                        dataIndex: 'disFee',
                    },
                    {
                        title: '次均结余',
                        dataIndex: 'disFeeAvg',
                    },
                    {
                        title: '平均住院日',
                        dataIndex: 'daysAvg',
                    },{
                        title: '次均费用',
                        dataIndex: 'timeFeeAvg',
                    },
                    {
                        title: '次均药品费',
                        dataIndex: 'drugFeeAvg',
                    },
                    {
                        title: '次均麻醉费用',
                        dataIndex: 'anesthesiaFeeAvg',
                    }],
                markData:null,
            }
        },
        created(){
            this.getAnalysisData()
        },
        mounted () {
        },
        methods: {
            markClose(){
                this.$emit('markClose',false)
            },
            timeChange:function(e){
                this.timeNum=e
            },
            async getAnalysisData() {
                const param={
                    dgId:null,
                    pageSize:100,
                    pageNum:1,
                    ...this.timeParams
                }
                const res = await doctorDataFeeCompositionList(param);
                console.log(res)
                if (res['data']) {
                    this.markData=res.data.list.map(element=> {
                        return element
                    })
                }
            },
            timeChange: function (e) {
                this.timeNum = e;
                this.timeChangeHandler(this.timeTypes[this.timeNum])
                this.completeParams();
            },
            panelChangeHandler(e) {
                this.dateOpen = false;
                this.dateValue = e;
                this.completeParams();
            },
            handleOpenChange(e) {
                this.dateOpen = e;
            },
            completeParams() {
                const params = {year: '', month: ''};
                params.year = this.dateValue.format("YYYY");
                params.month = this.timeNum === 2 ? this.dateValue.format("MM") : '';
                this.timeChangeHandler(params);
            },
            timeChangeHandler(e) {
                this.timeParams = e;
                this.getAnalysisData()
            },
        }
    }
</script>

<style scoped>
    .mark{ width:100%; height:100%; position: fixed; left:0; top:0; background-color:rgba(0,0,0,0.2); z-index:10; display: block; }
    .markcon{ width: 1200px; height: 700px; padding: 30px 30px;  box-sizing: border-box;  top: 0; right: 0; left: 0; bottom:0;  margin: auto; position: absolute; background-color: rgba(255, 255, 255, 1);}
    .markTitle{font-family: PingFangSC-Medium;font-size: 14px;color: #4B82FB;line-height: 14px; margin-bottom: 20px}
    .rightTime{ float: right;}
    .rightTime >>>.ant-input{font-size: 12px;}
    .clear{
        display: block;
        content: "";
        clear: both;
    }
    .close{position: absolute;right: 30px;top:30px;
        width: 16px; height:16px; color:#4B82FB}

    .timeChoose{ margin-right: 20px;font-size: 14px;color: #FFFFFF;}
    .ant-btn-group .ant-btn{}
    .ant-btn-group>.ant-btn:first-child:not(:last-child){ border-top-left-radius: 8px;border-bottom-left-radius: 8px;box-shadow: 0 2px 4px 0 rgba(39,39,42,0.20);}
    .ant-btn-group>.ant-btn:last-child:not(:first-child){ border-top-right-radius: 8px;border-bottom-right-radius: 8px;box-shadow: 0 2px 4px 0 rgba(39,39,42,0.20);}
    .ant-btn-group .ant-btn-primary:last-child:not(:first-child){border-top-right-radius: 8px;border-bottom-right-radius: 8px;background: #6190F7;
        box-shadow: inset 0 2px 4px 0 rgba(60,106,194,0.80);border-radius: 0 8px 8px 0;}
    .ant-btn-group .ant-btn-primary:first-child:not(:last-child){background: #6190F7;}
    .download{ display: inline-block;background: #FFFFFF;border: 1px solid #D8DCF7;border-radius: 8px; width:64px; height:24px; text-align: center;
        line-height: 22px;font-size: 12px;color: #6190F7;}
    .timeButton{width:50px;}
    .timePicker >>>.ant-input{box-shadow: 0 2px 4px 0 rgba(39,39,42,0.20);border-radius: 8px}
    .timeClass{ float:right;
        margin-bottom: 10px;}
</style>

